<?php ?>

<!-- ======================================================================
        Sample gallery infinite - Textures (Preset)
====================================================================== -->

<!-- ■ Javascript Area ■ -->
<script type="text/javascript">
    var options = {minMargin: 6, maxMargin: 15, itemSelector: ".item", firstItemClass: "first-item"};
    $(document).ready(function() {
        /* Endless Scroll Example */
        $('.gal_con_tx1')
                .rowGrid(options)
                .on("scroll", function() {
                    if ($('.gal_con_tx1').scrollTop() + $('.gal_con_tx1').height() > $('.gal_con_tx1')[0].scrollHeight - 30) { //추후에 이 아래를 진짜 썸네일 링크로 대체할 것
                        $('.gal_con_tx1').append("<div class='item thumb_tx1_1'><img src='../assets/book/editor/item_bg_textures/thumb_t1.jpg?" + Math.random() + "' width='60' height='60' /></div>\n\
            <div class='item thumb_tx1_2'><img src='../assets/book/editor/item_bg_textures/thumb_t2.jpg?" + Math.random() + "' width='60' height='60' /></div>\n\
<div class='item thumb_tx1_3'><img src='../assets/book/editor/item_bg_textures/thumb_t3.jpg?" + Math.random() + "' width='60' height='60' /></div>\n\
<div class='item thumb_tx1_4'><img src='../assets/book/editor/item_bg_textures/thumb_t4.jpg?" + Math.random() + "' width='60' height='60' /></div>\n\
<div class='item thumb_tx1_5'><img src='../assets/book/editor/item_bg_textures/thumb_t5.jpg?" + Math.random() + "' width='60' height='60' /></div>\n\
<div class='item thumb_tx1_6'><img src='../assets/book/editor/item_bg_textures/thumb_t6.jpg?" + Math.random() + "' width='60' height='60' /></div>\n\
<div class='item thumb_tx1_7'><img src='../assets/book/editor/item_bg_textures/thumb_t7.jpg?" + Math.random() + "' width='60' height='60' /></div>\n\
<div class='item thumb_tx1_8'><img src='../assets/book/editor/item_bg_textures/thumb_t8.jpg?" + Math.random() + "' width='60' height='60' /></div>");
                        $('.gal_con_tx1').rowGrid('appended');
                    }
                });

        //썸네일을 누르면 해당 레이어에 아이템을 삽입하는 동작 (예제를 위해 수동으로 삽입한 것이므로 추후 수정)
        $('.thumb_tx1_1').click(function() {
            $('.texture_inner, .btn_item2').css({'background-image': 'url(../assets/book/editor/item_bg_textures/texture_t1.jpg)'});
        });
        $('.thumb_tx1_2').click(function() {
            $('.texture_inner, .btn_item2').css({'background-image': 'url(../assets/book/editor/item_bg_textures/texture_t2.jpg)'});
        });
        $('.thumb_tx1_3').click(function() {
            $('.texture_inner, .btn_item2').css({'background-image': 'url(../assets/book/editor/item_bg_textures/texture_t3.jpg)'});
        });
        $('.thumb_tx1_4').click(function() {
            $('.texture_inner, .btn_item2').css({'background-image': 'url(../assets/book/editor/item_bg_textures/texture_t4.jpg)'});
        });
        $('.thumb_tx1_5').click(function() {
            $('.texture_inner, .btn_item2').css({'background-image': 'url(../assets/book/editor/item_bg_textures/texture_t5.jpg)'});
        });
        $('.thumb_tx1_6').click(function() {
            $('.texture_inner, .btn_item2').css({'background-image': 'url(../assets/book/editor/item_bg_textures/texture_t6.jpg)'});
        });
        $('.thumb_tx1_7').click(function() {
            $('.texture_inner, .btn_item2').css({'background-image': 'url(../assets/book/editor/item_bg_textures/texture_t7.jpg)'});
        });
        $('.thumb_tx1_8').click(function() {
            $('.texture_inner, .btn_item2').css({'background-image': 'url(../assets/book/editor/item_bg_textures/texture_t8.jpg)'});
        });
    });
</script>


<!-- ■ HTML Area ■ 
★★★ Tip : 현재 예제를 위해 수동으로 썸네일 링크를 나열했으나 실제로는 변수로 배열 처리 해야한다.
아래 나열된 개수만큼의 링크만 동작 가능하고 무한 스크롤로 생성된 썸네일의 링크는 동작하지 않는다. 
상단 자바스크립트 부분의 썸네일 경로를 보면, 이미지 주소 끝에 '?'가 붙어있다.
이 아래의 썸네일 링크가 실제로 페이지에 표시되는 부분으로써 위에서 붙인 '?' 다음에 자동으로 증가되는 숫자값을 가지도록 배열을 짠다.
이런 식으로 무한 스크롤을 구현한다.
-->
<div class="gal_con_tx1 gal_con">
    <div class="item thumb_tx1_1">
        <img src="../assets/book/editor/item_bg_textures/thumb_t1.jpg?1" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_2">
        <img src="../assets/book/editor/item_bg_textures/thumb_t2.jpg?2" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_3">
        <img src="../assets/book/editor/item_bg_textures/thumb_t3.jpg?3" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_4">
        <img src="../assets/book/editor/item_bg_textures/thumb_t4.jpg?4" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_5">
        <img src="../assets/book/editor/item_bg_textures/thumb_t5.jpg?5" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_6">
        <img src="../assets/book/editor/item_bg_textures/thumb_t6.jpg?6" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_7">
        <img src="../assets/book/editor/item_bg_textures/thumb_t7.jpg?7" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_8">
        <img src="../assets/book/editor/item_bg_textures/thumb_t8.jpg?8" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_1">
        <img src="../assets/book/editor/item_bg_textures/thumb_t1.jpg?9" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_2">
        <img src="../assets/book/editor/item_bg_textures/thumb_t2.jpg?10" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_3">
        <img src="../assets/book/editor/item_bg_textures/thumb_t3.jpg?11" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_4">
        <img src="../assets/book/editor/item_bg_textures/thumb_t4.jpg?12" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_5">
        <img src="../assets/book/editor/item_bg_textures/thumb_t5.jpg?13" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_6">
        <img src="../assets/book/editor/item_bg_textures/thumb_t6.jpg?14" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_7">
        <img src="../assets/book/editor/item_bg_textures/thumb_t7.jpg?15" width="60" height="60" />
    </div>
    <div class="item thumb_tx1_8">
        <img src="../assets/book/editor/item_bg_textures/thumb_t8.jpg?16" width="60" height="60" />
    </div>
</div>

<?php ?>